<template>
  <el-card shadow="hover">
    <div class="tip">
      <div class="header">
        <div class="left">
          <svg
            t="1697273169783"
            class="icon"
            viewBox="0 0 1024 1024"
            version="1.1"
            xmlns="http://www.w3.org/2000/svg"
            p-id="4094"
            width="16"
            height="16"
          >
            <path
              d="M400.696008 129.093147c-17.248849 0-31.233352 13.984503-31.233352 31.233352l0 30.470989c0 17.248849 13.984503 31.233352 31.233352 31.233352s31.233352-13.984503 31.233352-31.233352l0-30.470989C431.92936 143.078673 417.944857 129.093147 400.696008 129.093147z"
              fill="#515151"
              p-id="4095"
            ></path>
            <path
              d="M623.647823 129.093147c-17.248849 0-31.233352 13.984503-31.233352 31.233352l0 30.470989c0 17.248849 13.985526 31.233352 31.233352 31.233352 17.248849 0 31.233352-13.984503 31.233352-31.233352l0-30.470989C654.881175 143.078673 640.896672 129.093147 623.647823 129.093147z"
              fill="#515151"
              p-id="4096"
            ></path>
            <path
              d="M425.695379 312.937269c11.209296 18.047028 41.974997 48.588625 86.152149 48.588625 43.958164 0 75.100442-30.308283 86.573751-48.223305 9.302877-14.528901 5.068436-33.846876-9.455349-43.149752-14.539134-9.307993-33.851992-5.063319-43.149752 9.455349-0.121773 0.198521-13.379729 19.449981-33.968649 19.449981-19.993357 0-32.428573-18.107403-33.271778-19.373233-9.17087-14.417361-28.28009-18.799158-42.829458-9.760295C421.089477 279.028994 416.591023 298.28557 425.695379 312.937269z"
              fill="#515151"
              p-id="4097"
            ></path>
            <path
              d="M564.242851 625.945145l-20.278859 0L543.963992 462.486306c0-17.253966-13.985526-31.233352-31.233352-31.233352-17.248849 0-31.233352 13.979386-31.233352 31.233352l0 163.457816-20.283975 0c-45.924959 0-83.289961 37.363979-83.289961 83.289961l0 103.024421c0 45.924959 37.363979 83.289961 83.289961 83.289961l103.029538 0c45.924959 0 83.289961-37.363979 83.289961-83.289961L647.532813 709.234083C647.532813 663.309124 610.168834 625.945145 564.242851 625.945145zM585.066109 812.258505c0 11.286044-9.537214 20.822235-20.822235 20.822235L461.214337 833.080739c-11.286044 0-20.822235-9.537214-20.822235-20.822235L440.392102 709.234083c0-11.286044 9.537214-20.822235 20.822235-20.822235l103.029538 0c11.286044 0 20.822235 9.537214 20.822235 20.822235L585.066109 812.258505z"
              fill="#515151"
              p-id="4098"
            ></path>
            <path
              d="M250.808256 625.945145l-17.482163 0 0-266.970354c0-35.483142 28.864398-64.35368 64.343447-64.35368 17.248849 0 31.233352-13.984503 31.233352-31.233352s-13.985526-31.233352-31.233352-31.233352c-69.924559 0-126.810151 56.890708-126.810151 126.820384l0 266.970354-23.079648 0c-45.924959 0-83.289961 37.363979-83.289961 83.289961l0 103.024421c0 45.924959 37.363979 83.289961 83.289961 83.289961l103.029538 0c45.924959 0 83.289961-37.363979 83.289961-83.289961L334.099241 709.234083C334.098217 663.309124 296.734238 625.945145 250.808256 625.945145zM271.630491 812.258505c0 11.286044-9.537214 20.822235-20.822235 20.822235L147.778718 833.080739c-11.286044 0-20.822235-9.537214-20.822235-20.822235L126.956484 709.234083c0-11.286044 9.537214-20.822235 20.822235-20.822235l103.029538 0c11.286044 0 20.822235 9.537214 20.822235 20.822235L271.630491 812.258505z"
              fill="#515151"
              p-id="4099"
            ></path>
            <path
              d="M876.565113 625.945145l-21.961174 0 0-266.970354c0-69.929676-56.890708-126.820384-126.815267-126.820384-17.248849 0-31.233352 13.985526-31.233352 31.233352s13.984503 31.233352 31.233352 31.233352c35.483142 0 64.348564 28.869514 64.348564 64.35368l0 266.970354-18.605753 0c-45.924959 0-83.289961 37.363979-83.289961 83.289961l0 103.024421c0 45.924959 37.363979 83.289961 83.289961 83.289961l103.034655 0c45.924959 0 83.289961-37.363979 83.289961-83.289961L959.856098 709.234083C959.854051 663.309124 922.490072 625.945145 876.565113 625.945145zM897.387347 812.258505c0 11.286044-9.537214 20.822235-20.822235 20.822235L773.530458 833.080739c-11.286044 0-20.822235-9.537214-20.822235-20.822235L752.708224 709.234083c0-11.286044 9.537214-20.822235 20.822235-20.822235l103.034655 0c11.286044 0 20.822235 9.537214 20.822235 20.822235L897.387347 812.258505z"
              fill="#515151"
              p-id="4100"
            ></path>
          </svg>
          <span>全部科室</span>
        </div>
        <div class="right">
          <span>全部</span>
          <svg
            t="1697273315113"
            class="icon"
            viewBox="0 0 1024 1024"
            version="1.1"
            xmlns="http://www.w3.org/2000/svg"
            p-id="5286"
            width="13"
            height="13"
          >
            <path
              d="M761.6 489.6l-432-435.2c-9.6-9.6-25.6-9.6-35.2 0-9.6 9.6-9.6 25.6 0 35.2l416 416-416 425.6c-9.6 9.6-9.6 25.6 0 35.2s25.6 9.6 35.2 0l432-441.6C771.2 515.2 771.2 499.2 761.6 489.6z"
              p-id="5287"
            ></path>
          </svg>
        </div>
      </div>
      <div class="contend">
        <ul>
          <li>神经内科</li>
          <li>消化内科</li>
          <li>内科</li>
          <li>神经外科</li>
          <li>呼吸内科</li>
          <li>妇科</li>
          <li>产科</li>
          <li>儿科</li>
        </ul>
      </div>
    </div>
  </el-card>
  <el-card shadow="hover" class="card">
    <div class="notice">
      <div class="header">
        <div class="left">
          <svg
            t="1697274152712"
            class="icon"
            viewBox="0 0 1024 1024"
            version="1.1"
            xmlns="http://www.w3.org/2000/svg"
            p-id="4052"
            width="16"
            height="16"
          >
            <path
              d="M768.554667 824.490667v64H258.666667v-64h509.888zM906.666667 181.333333v533.333334h-789.333334v-533.333334h789.333334z m-64 64h-661.333334v405.333334h661.333334v-405.333334z m-115.712 237.824v64h-426.666667v-64h426.666667z m0-149.333333v64h-426.666667v-64h426.666667z"
              fill="#1677FF"
              p-id="4053"
            ></path>
          </svg>
          <span>平台公告</span>
        </div>
        <div class="right" @click="allCall" >
          <span >全部</span>
          <svg
            t="1697273315113"
            class="icon"
            viewBox="0 0 1024 1024"
            version="1.1"
            xmlns="http://www.w3.org/2000/svg"
            p-id="5286"
            width="13"
            height="13"
          >
            <path
              d="M761.6 489.6l-432-435.2c-9.6-9.6-25.6-9.6-35.2 0-9.6 9.6-9.6 25.6 0 35.2l416 416-416 425.6c-9.6 9.6-9.6 25.6 0 35.2s25.6 9.6 35.2 0l432-441.6C771.2 515.2 771.2 499.2 761.6 489.6z"
              p-id="5287"
            ></path>
          </svg>
        </div>
      </div>
      <div class="contend">
        <ul>
          <li v-for="(item,index) in callList" :key="item._id" @click="getCallDetail(item._id,index)" >{{ item.text }}</li>
        </ul>
      </div>
    </div>
  </el-card>
  <el-card shadow="hover" class="card">
    <div class="notice">
      <div class="header">
        <div class="left">
          <svg
            t="1697275092850"
            class="icon"
            viewBox="0 0 1041 1024"
            version="1.1"
            xmlns="http://www.w3.org/2000/svg"
            p-id="5136"
            width="13"
            height="13"
          >
            <path
              d="M706.130295 18.871061L297.431431 203.272019H102.452232A89.653865 89.653865 0 0 0 13.059558 292.664692v461.328883a89.653865 89.653865 0 0 0 89.392674 89.392674h194.979199l410.461905 165.660492a47.406195 47.406195 0 0 0 65.297789-43.945412V62.0329a47.406195 47.406195 0 0 0-67.06083-43.161839z"
              fill="#FFF100"
              p-id="5137"
            ></path>
            <path
              d="M71.827568 199.027662a89.784461 89.784461 0 0 0-58.76801 83.90766V744.3948a89.653865 89.653865 0 0 0 58.76801 83.842362z"
              fill="#FFFFFF"
              p-id="5138"
            ></path>
            <path
              d="M721.605872 17.303914l-13.516643 7.966331V999.709157l14.887896 7.770437c23.964289 12.602473 50.083405-10.317051 50.083405-43.945412V60.465753c0-34.346637-27.359774-57.331459-51.454658-43.161839z"
              fill="#F8B62D"
              p-id="5139"
            ></path>
            <path
              d="M459.957629 920.698832a13.059558 13.059558 0 0 1-4.897334-0.979467l-160.175478-64.644812H102.452232A102.582827 102.582827 0 0 1 0 752.426428V291.097546a102.582827 102.582827 0 0 1 102.452232-102.452232h192.171394L700.775877 5.354419a60.531051 60.531051 0 0 1 85.344211 55.111334V144.961093a13.059558 13.059558 0 1 1-26.119116 0V60.465753A34.411935 34.411935 0 0 0 711.745905 29.188112L300.369832 214.76443H102.452232A76.398414 76.398414 0 0 0 26.119116 291.097546v461.328882a76.398414 76.398414 0 0 0 76.333116 76.333116h197.525813l164.876918 66.538448a13.059558 13.059558 0 0 1-4.897334 25.204946zM773.06053 348.755494a13.059558 13.059558 0 0 1-13.059558-13.059558v-91.416906a13.059558 13.059558 0 1 1 26.119116 0v91.416906a13.059558 13.059558 0 0 1-13.059558 13.059558zM725.654335 1023.999935a60.792242 60.792242 0 0 1-22.658333-4.374952l-110.157371-44.467795a13.059558 13.059558 0 0 1 9.794668-24.22548l110.157371 44.467795a34.346637 34.346637 0 0 0 47.210302-31.865321V459.174056a13.059558 13.059558 0 0 1 26.119116 0v504.360126a60.400455 60.400455 0 0 1-60.465753 60.465753z"
              fill="#231815"
              p-id="5140"
            ></path>
            <path
              d="M962.554715 245.78088c40.615225 63.991834 65.88547 153.90689 65.885469 253.486018 0 115.51179-34.020148 217.964021-86.519571 282.151749"
              fill="#FFFFFF"
              p-id="5141"
            ></path>
            <path
              d="M941.920613 794.478205a13.059558 13.059558 0 0 1-10.121157-21.352377c52.238232-63.926536 83.581171-166.31347 83.58117-273.85893 0-94.094115-22.658333-181.593153-63.861238-246.499155a13.059558 13.059558 0 1 1 22.070653-13.973727c43.814817 68.954466 67.909701 161.481433 67.909701 260.472882 0 115.120003-32.648895 220.96772-89.457971 290.444568a13.059558 13.059558 0 0 1-10.121158 4.766739z"
              fill="#231815"
              p-id="5142"
            ></path>
          </svg>
          <span>停诊公告</span>
        </div>
        <div class="right">
          <span>全部</span>
          <svg
            t="1697273315113"
            class="icon"
            viewBox="0 0 1024 1024"
            version="1.1"
            xmlns="http://www.w3.org/2000/svg"
            p-id="5286"
            width="13"
            height="13"
          >
            <path
              d="M761.6 489.6l-432-435.2c-9.6-9.6-25.6-9.6-35.2 0-9.6 9.6-9.6 25.6 0 35.2l416 416-416 425.6c-9.6 9.6-9.6 25.6 0 35.2s25.6 9.6 35.2 0l432-441.6C771.2 515.2 771.2 499.2 761.6 489.6z"
              p-id="5287"
            ></path>
          </svg>
        </div>
      </div>
      <div class="contend">
        <ul>
          <li>武汉第一人民医院第六医院停诊公告</li>
          <li>武汉第一人民医院停诊公告</li>
          <li>武汉第一人民医院中西医结合心率科室停诊公告</li>
        </ul>
      </div>
    </div>
  </el-card>
  <el-dialog v-model="centerDialogVisible" :title="callInfo.title" width="500" center>
    <div class="bid">
     
      <div class="text" v-html="callInfo.content" ></div>
      <div class="athur">
        <p>发布科室: <span>{{  callInfo.docId.TweDepart}}</span> </p> 
        <p>发布者: <span>{{  callInfo.docId.name}}</span> </p> 
        <p>发布时间: <span>{{  callInfo.createAt.split('T')[0] }}</span> </p> 
      </div>
    </div>
  
  </el-dialog>
  <el-drawer v-model="drawer" title="公告列表"  >
    <el-alert :closable="false" @click="getCallDetail(item._id,index)" style="margin: 5px 0px;" :title="item.text" type="info" v-for="(item,index) in allList" :key="item._id" show-icon />
  </el-drawer> 
</template>

<script setup lang="ts" >
import { ref , reactive , onMounted } from "vue";
import { getCallListAPI } from "@/api/call";
import { extractTextFromHTML } from '@/utils/string'
let callList = ref([]);
let centerDialogVisible = ref(false)
let drawer = ref(false)
let allList=ref([])
let callInfo = reactive({
  content:'',
  title:'',
  docId:{
    TweDepart:'',
    name:'',
    _id:''
  },
createAt:''
})
onMounted(() => {
  getCallList();
});
const getCallList = async () => {
  let result = await getCallListAPI(1, 5);
  callList.value = result.data?.map((item) => {
    let text = extractTextFromHTML(item.content)
    return {
      _id: item._id,
      content: item.content,
      docId: item.docId,
      title: item.title,
      createAt: item.createAt,
      updateAt: item.updateAt,
      text:text
    };
  });
};

//获取公告详情
const getCallDetail = (id,index)=>{
    centerDialogVisible.value = true
    Object.assign(callInfo,callList.value[index])
}
//获取全部
const allCall = async ()=>{
  drawer.value = true
  let result = await getCallListAPI(1, 5);
  allList.value = result.data?.map((item) => {
    let text = extractTextFromHTML(item.content)
    return {
      _id: item._id,
      content: item.content,
      docId: item.docId,
      title: item.title,
      createAt: item.createAt,
      updateAt: item.updateAt,
      text:text
    };
  });
}
</script>

<style scoped lang="scss">
.tip {
  color: #7f7f7f;
  font-size: 13px;
  .header {
    display: flex;
    justify-content: space-between;
    .left {
      display: flex;
      span {
        margin-left: 5px;
      }
    }
    .right {
      display: flex;
      span {
        margin-right: 5px;
      }
    }
  }
  .contend {
    ul {
      display: flex;
      justify-content: space-between;
      flex-wrap: wrap;
      li {
        width: 45%;
        margin-top: 20px;
        overflow: hidden;
        text-overflow: ellipsis;
        //不换行
        white-space: nowrap;
      }

      li:hover {
        //鼠标变成小手
        cursor: pointer;
      }
    }
  }
}
.card {
  margin-top: 20px;
  font-size: 13px;
  .notice {
    color: #7f7f7f;
    .header {
      display: flex;
      justify-content: space-between;
      .left {
        display: flex;
        span {
          margin-left: 5px;
        }
      }
      .right {
        span {
          margin-right: 5px;
        }
      }
    }
    .contend {
      ul {
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        li {
          margin-top: 20px;
          overflow: hidden;
          text-overflow: ellipsis;
          //不换行
          white-space: nowrap;
        }
        li:hover {
          //鼠标变成小手
          cursor: pointer;
        }
      }
    }
  }
}
.bid {
  min-height: 220px;
  display: flex;
  flex-direction: column;
  .text {
    flex: 9;
  }
  .athur {
    flex: 1;
    line-height: 30px;
    display: flex;
    flex-direction: column;
    align-items:end;
  }
}
</style>
